<template>
    <div class="table">
        <el-table :data="tableData" cell-class-name="pp" header-cell-class-name="pp"
                  height="650px">
            <el-table-column label="#" type="expand">
                <template #default="props">
                    <div style="padding: 0 20px">
                        <el-descriptions :column="3" title="患者详情">
                            <el-descriptions-item label="身份证号码">
                                <el-text type="primary">
                                    {{ props.row.idCard }}
                                </el-text>
                            </el-descriptions-item>
                            <el-descriptions-item label="地址">
                                <el-text type="primary">
                                    {{ props.row.address }}
                                </el-text>
                            </el-descriptions-item>
                            <el-descriptions-item label="房间消毒状态">
                                <el-tag v-if="props.row.disinfection">已消毒</el-tag>
                                <el-tag v-else type="danger">未消毒</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="备注">
                                <el-text>
                                    {{ props.row.userRemark }}
                                </el-text>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="uname"/>
            <el-table-column label="头像">
                <template #default="scope">
                    <el-avatar :size="50" :src="`/api/images/${scope.row.picture}`"/>
                </template>
            </el-table-column>
            <el-table-column label="年龄" prop="age"/>
            <el-table-column label="电话号码" prop="telephone"/>
            <el-table-column label="居住区域" prop="areaName"/>
            <el-table-column label="居住房间" prop="name"/>
            <el-table-column label="手机类型">
                <template #default="props">
                    <el-tag v-if="props.row.phone">智能机</el-tag>
                    <el-tag v-else type="success">老年机</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="入住日期" prop="enterTime">
                <template #default="props">
                    {{ dealDate(props.row.enterTime) }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button link type="primary" @click="updateVol(scope.row.userId)">
                        修改
                    </el-button>
                    <el-popconfirm :title="`确定要删除${scope.row.uname}的数据吗？`" cancel-button-text="取消"
                                   confirm-button-text="确定"
                                   @confirm="deleteClick(scope.row.userId)">
                        <template #reference>
                            <el-button link type="danger">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="utotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
    <UserDrawer/>
</template>

<script lang='ts' setup>
import UserService from '@/api/userApi'
import { onBeforeMount, ref } from 'vue'
import { User, UserDto } from '@/ts/type/User'
import { dealDate } from '@/utils/commonUtils'
import { EventBus } from '@/utils/mitt'
import { Notification } from '@/plugins/element'
import UserDrawer from '@/components/User/userDrawer.vue'

const searchBool = ref<boolean>(false)
const searchVal = ref<User>({})
const tableData = ref<UserDto[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(8)
const utotal = ref<number>(0)

// 获取用户列表数据
const getUserInfoList = () => {
  UserService.getUserInfoList(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    utotal.value = total
  })
}

// 修改患者用户操作
const updateVol = (userId: number) => {
  console.log(userId)
  EventBus.emit('updateUser', { userId })
}

// 删除患者用户操作
const deleteClick = (userId: number) => {
  console.log(userId)
  UserService.deleteUser(userId).then(res => {
    const { data } = res
    Notification.success(data)
    getUserInfoList()
  })
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (searchBool.value) return queryUser()
  getUserInfoList()
}

const queryUser = () => {
  UserService.queryUser(currentPage.value, pageSize.value, searchVal.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    utotal.value = total
  })
}
EventBus.on('searchUser', res => {
  const { bool, uname } = res
  searchBool.value = bool
  if (!bool) return getUserInfoList()
  searchVal.value.uname = uname
  queryUser()
})
// 页面加载数据时进行数据获取
onBeforeMount(() => {
  getUserInfoList()
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}

</style>